<script>
import request from "../../utils/request"
import store from "../../store"
import { userActionType } from "../../store/modules/user"
import UniLoadMore from "../../uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import { getShowImage, handleUrlParams } from "../../utils"
import eyeIcon from "./assets/eye.png"
import Empty from "../../components/empty.vue"

export default {
  name: "index.vue",
  components: { Empty, UniLoadMore },
  data() {
    return {
      informationArticleList: [], //资讯文章列表
      pagination: {
        current: 1,
        size: 10,
      },
      loadMoreStatusText: "more",
      eyeIcon,
      isEmpty: false,
      queryParams: {
        articlesClassId: "",
      },
			firstOpen: true, // 第一次打开页面
    }
  },
	computed: {
		userSelectExamId: () => store.getters[userActionType.getters.userSelectExamId],
	},
  methods: {
    getShowImage,
    getInformationArticleList() {
      return new Promise(async (resolve, reject) => {
				if (!this.userSelectExamId) {
					await store.dispatch(userActionType.action.examInfo)
				}
				//没有选择考试跳转到考试选择页面
				if (!this.userSelectExamId) {
					uni.navigateTo({
						url: "/pages/examSelection/index",
					})
					return
				}
        request({
          url: "inforArticles/listArticles",
          data: {
            ...this.pagination,
            examId: this.userSelectExamId,
						...this.queryParams,
          },
          errorHandle: true,
        }).then((data) => {
          this.isEmpty = data.total === 0
          //处理标签列表
          for (let record of data.records) {
            if (record.articlesLabel) {
              record.articlesLabel = JSON.parse(record.articlesLabel)
            }
          }
          this.informationArticleList.push(...data.records)
          //控制 loadMore 组件
          if (data.total === this.informationArticleList.length) {
            this.loadMoreStatusText = "noMore"
          } else {
            this.loadMoreStatusText = "more"
          }
          resolve()
        })
      })
    },
    //清空列表重置分页重新加载数据
    async refreshList() {
      this.loadMoreStatusText = "more"
      this.informationArticleList = []
      this.pagination.current = 1
      await this.getInformationArticleList()
    },
    //资讯文章点击查看详情
    articleClick(item) {
      //获取资讯文章详情（统计阅读量）
      request({
        url: "inforArticles/getArticlesDetails",
        data: {
          articlesId: item.articlesId,
        },
        errorHandle: true,
        showLoading: true,
      }).then((data) => {
        //跳转到外部的地址
        if (item.linkType === "EXTERNAL") {
          uni.navigateTo({
            url: handleUrlParams("/pages/web-view/web-view", {
              path: encodeURIComponent(item.linkUrl),
            }),
          })
          //跳转到内部的详情页
        } else if (item.linkType === "NONE") {
          uni.navigateTo({
            url: handleUrlParams("/pages/examPreparationTips/detail", {
              articlesId: item.articlesId,
            }),
          })
        }
      })
    },
  },
  //下拉到底加载下一页数据
  onReachBottom() {
    this.pagination.current++
    this.loadMoreStatusText = "loading"
    this.getInformationArticleList()
  },
  //从顶部下拉刷新
  async onPullDownRefresh() {
    await this.refreshList()
    uni.stopPullDownRefresh()
  },
  onLoad(query) {
    uni.showLoading({
      title: "加载中",
      mask: true,
    })
    this.queryParams.articlesClassId = query.articlesClassId
    //动态设置页面标题
		if (query.articlesClassName) {
			uni.setNavigationBarTitle({
				title: query.articlesClassName,
			})
		}
    this.refreshList().finally(() => {
      uni.hideLoading()
    })
  },
	onShow() {
		if (!this.firstOpen) {
			uni.showLoading({
				title: "加载中",
				mask: true,
			})
			this.refreshList().finally(() => {
				uni.hideLoading()
			})
		}
		this.firstOpen = false
	}
}
</script>

<template>
  <view class="page">
    <empty v-if="isEmpty" height="100vh"></empty>
    <template v-else>
      <!--		文章列表-->
      <view class="article-list">
        <view class="article-item" v-for="item in informationArticleList" :key="item.articlesId" @click="articleClick(item)">
          <!--				文章图标-->
          <image class="icon" :src="getShowImage(item.articlesIcon)" v-if="item.articlesIcon"></image>
          <view class="right">
            <!--					文章标题-->
            <view class="row title">{{ item.articlesTitle }}</view>
            <!--					标签列表-->
            <template v-if="item.articlesLabel && item.articlesLabel.length > 0">
              <view class="label-list">
                <view class="label-item" v-for="label in item.articlesLabel" :key="label">
                  {{ label }}
                </view>
              </view>
            </template>
            <!--					发布日期-->
            <view class="row release-date">{{ item.publishTime }}</view>
            <!--					查看人数-->
            <view class="row view-count">
              <image class="icon" :src="eyeIcon"></image>
              <text>{{ item.readingValue }}</text>
            </view>
          </view>
        </view>
      </view>
      <uni-load-more :status="loadMoreStatusText"></uni-load-more>
    </template>
  </view>
</template>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: var(--gray-background-color);
  .article-list {
    padding: {
      top: 30rpx;
      left: 30rpx;
      right: 30rpx;
    }
    .article-item {
      background-color: #fff;
      margin-bottom: 30rpx;
      padding: 30rpx;
      border-radius: 20rpx;
      box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
      display: flex;
      > .icon {
        margin-right: 30rpx;
        width: 200rpx;
        height: 200rpx;
      }
      > .right {
        width: 0;
        flex: 1;
        > .row {
          &:not(:last-child) {
            margin-bottom: 20rpx;
          }
        }
        > .title {
          font-size: 34rpx;
          font-weight: 500;
        }
        > .label-list {
          display: flex;
          flex-wrap: wrap;
          padding-bottom: 10rpx;
          > .label-item {
            padding: 0 16rpx;
            background-color: var(--theme-color);
            font-size: 28rpx;
            height: 40rpx;
            line-height: 40rpx;
            border-radius: 20rpx;
            margin-right: 20rpx;
            margin-bottom: 10rpx;
						color: var(--text-color-white);
          }
        }
        > .release-date {
          font-size: 28rpx;
          color: var(--text-color-light);
        }
        > .view-count {
          display: flex;
          align-items: center;
          > .icon {
            width: 30rpx;
            height: 30rpx;
            margin-right: 10rpx;
          }
          > text {
            font-size: 28rpx;
            color: var(--text-color-light);
          }
        }
      }
    }
  }
}
</style>
